<template>

	<view class="confirm-content">
		<HeaderTitle :title="$t('ConfirmOrder')" :bottom="true" :lang="false" :mobile="false" :combakflag="true">
		</HeaderTitle>
		<TopBar :indexflag="true" :combakflag="true" :lang="false" :bottom="true" title="确认订单"
			barstyle="background-color:rgba(0,0,0,0)"></TopBar>
		<view class="" :style="{direction:i18nLocale=='ug'?'rtl':''}">
			<!-- 选择购买方式 -->
			<view class="selecet-type card-style" v-if="0">
				<view :class="index==actype?'selecet-item active':'selecet-item'" v-for="(item,index) in selecetList"
					@click="selecetType(index)">
					<view class="title">{{$t(item.title)}}</view>
					<view class="sub-title">{{$t(item.sub_title)}}</view>
					<view class="price" :style="{color:index==0?'#45bc1b':'#f4464b'}"> <text
							style="font-size: 30rpx;">￥</text> {{item.price}}</view>
					<view class="selecet-top" v-if="index==actype"></view>
				</view>
			</view>

			<!-- 选择地址 -->

			<view class="selecet-address card-style" @click="addressshow=true">
				<view class="title" v-if="!actvaddress">{{$t('ActveAddress')}}</view>
				<view class="address-content" v-if="actvaddress">
					<view class="title">
						{{i18nLocale=='ug'?actvaddress.community.ug_name:actvaddress.community.cn_name}}
					</view>
					<view class="address">{{actvaddress.detail}}</view>
					<view class="user">
						<text>{{actvaddress.name}}</text>
						<view class="pone">{{actvaddress.mobile}}</view>
					</view>
				</view>
				<u-icon name="arrow-right" color="#3f3f42" size="22" v-if="i18nLocale=='cn'"></u-icon>
				<u-icon name="arrow-left" color="#3f3f42" size="22" v-if="i18nLocale=='ug'"></u-icon>
			</view>
			<!-- 配送时间 -->

			<view class="selecet-time card-style" @click="timeshow=true">
				<view class="title">{{$t('DeliveryTime')}}</view>
				<view class="time">
					<text>{{$t('Approximately')}} {{newData}}</text>
					<!-- <u-icon name="arrow-right" color="#3f3f42" size="22"></u-icon> -->
				</view>
			</view>
			<!-- 选择时间 -->
			<u-datetime-picker :show="timeshow" v-model="newData" mode="time" dir="ltr" @close="timeshow=false"
				@cancel="timeshow=false" @confirm="changetime" closeOnClickOverlay :minHour="10" :maxHour="22"
				:cancelText="$t('TimeCancel')" :confirmText="$t('Confirm')">

			</u-datetime-picker>
			<!-- 购物车列表 -->

			<view class="cart-list card-style">
				<view class="cart-list " v-for="(big_item,big_index) in  totalshop">
					<view class="card-item" v-for="(item,index) in totalshop[big_index].categories"
						v-if="totalshop.length!=0">
						<view class="item" v-for="(sub_item,sub_index) in item.products" v-if="sub_item.qty">
							<view class="left">
								<image :src="getImgSrc(sub_item.img)" class="img"></image>
								<view class="shop-content">
									<view class="name">{{ i18nLocale=='ug'?sub_item.ug_name:sub_item.cn_name }}</view>
									<view class="qut"> <text class="x-text">X</text> <text>{{sub_item.qty}}</text>
									</view>
								</view>
							</view>
							<view class="right">
								￥{{sub_item.price}}
							</view>
						</view>
					</view>
				</view>

				<view class="delivery-fees">
					<view class="title">{{$t('DeliveryFees')}}</view>
					<view class="price"
						:class="price.toFixed(1)>=Number(alertdata.free_shipping)?'price dcrtion-price':'price'">￥
						{{Shipment}}</view>
				</view>
				<view class="all-Price">
					<view class="title">{{$t('TotalPrice')}}</view>
					<view class="price">￥ {{price}}</view>
				</view>
			</view>

			<!-- 备注 -->
			<view class="remark">
				<view class="title">{{$t('Remark')}}</view>
				<u--textarea v-model="remark_value" maxlength="200" :placeholder="$t('RemarkPlaceholder')" border="none"></u--textarea>
			</view>

			<view class="bottom-button" :style="{direction:i18nLocale=='ug'?'ltr':''}">
				<view class="shre-left">
					<view class="icon-box">
						<u-icon name="shopping-cart" color="#45bc1b" size="48"></u-icon>
						<view class="number">{{totalnumber}}</view>
					</view>
					<view class="price-box">
						<view class="price">￥<text
								style="font-weight: bold;">{{price.toFixed(1)>=Number(alertdata.free_shipping)?price:price + Number(Shipment)}}</text>
						</view>
					</view>
				</view>
				<view class="share-right" @click="Checkout">
					{{$t('GoCheckout')}}
				</view>
			</view>
			<!-- 弹出层 -->
			<u-popup :show="addressshow" :round="10" mode="bottom" @close="close" @open="open">
				<view class="addres-liist">
					<view class="top-title">{{$t('SelecetAddress')}}</view>
					<view class="scroll-conetnt">
						<scroll-view scroll-y="true" style="width:100%;height:100%;">
							<view class="item" v-for="(item,index) in addressList" :key="index"
								:style="{border:index==0?'none':''}" @click="changeddress(index,item)">
								<view class="left">
									<view class="seletor">
										<u-icon v-if="item.id==address_index" name="checkmark" color="#45bc1b"
											size="25"></u-icon>
									</view>
									<view class="addres-content">
										<view class="address">
											<view class="">
												{{i18nLocale=='ug'?item.community.ug_name:item.community.cn_name}}
											</view>
											<view class="">{{item.detail}}</view>
										</view>
										<view class="user">
											<view class="">{{item.name}} </view>
											<view class="">{{item.mobile}} </view>
										</view>
									</view>
								</view>
								<view class="icon" @click="editAddress(item.id)">
									<u-icon name="edit-pen" color="#858585" size="25"></u-icon>
								</view>
							</view>
							<view class="" style="height:200rpx"></view>
						</scroll-view>
					</view>
					<view class="footer-button" @click="addaddress">
						{{$t('AddAddress')}}
					</view>
				</view>
			</u-popup>
		</view>
		<u-toast ref="uToast" :message="notmessage"></u-toast>
	</view>
</template>

<script>
	import TopBar from "@/components/TopBar.vue"
	import {
		getaddress,
		postorders,
		getconfigs
	} from '@/api/all.js';
	export default {
		components: {
			TopBar
		},
		data() {
			return {
				actype: 0,
				selecetList: [{
						title: 'TakeawayDelivery',
						sub_title: 'TakeawayPlaceholder',
						price: '187'
					},
					{
						title: 'ArriveStore',
						sub_title: 'ArrivePlaceholder',
						price: '183'
					}
				],
				addressshow: false,
				timeshow: false,
				newData: new Date().getHours() + ':' + new Date().getMinutes(),
				addressList: [],
				address_index: '',
				actvaddress: '',
				remark_value: '',
				selecetItem: [],
				alertdata: '',
				notmessage: '请仔细填写!'
			}
		},
		onLoad(e) {
			this.getAddress();
			uni.setNavigationBarTitle({
				title: this.$t('ConfirmOrder')
			})
			//获取配送费
			this.getConfigs();
			//订单处理
			this.$store.state.shop.totalshop.map(big_item => {
				big_item.categories.map(item => {
					item.products.map(sub_item => {
						if (sub_item.qty) {
							this.selecetItem.push({
								id: sub_item.id,
								qty: sub_item.qty
							});
						}
					})

				})
			})

		},
		computed: {
			price() {
				return this.$store.state.shop.totalprice;
			},
			totalnumber() {
				return this.$store.state.shop.totalnumber;
			},
			totalshop() {
				return this.$store.state.shop.totalshop;
			},

			i18nLocale() {
				return this.$i18n.locale;
			},
			Shipment() {
				return this.$store.state.shipment;
			},

		},
		methods: {
			selecetType(index) {
				this.actype = index;
			},
			open() {
				// console.log('open');
			},
			close() {
				this.addressshow = false
				// console.log('close');
			},
			changeddress(index, item) {
				this.address_index = item.id;
				
				this.actvaddress = item;
				this.addressshow = false;
			},
			//获取地址
			getAddress() {
				this.addressList = this.$store.state.useraddress;
				console.log(this.$store.state.useraddress)
				if (this.addressList.length) {
					this.addressList.map(item => {
						
						if (item.current) {
							this.actvaddress = item;
							this.address_index = item.id
						}
					})

				}
			},
			addaddress(){
				uni.navigateTo({
					url:'/pages/me/address/add_address'
				})
			},
			editAddress(id) {
				uni.navigateTo({
					url: '/pages/me/address/add_address?id=' + id
				})
			},
			//选择时间
			changetime(e) {
				console.log(e, '+++++')
				this.timeshow = false

				this.newData = e.value;
				this.Stringtime(this.newData);
			},
			//时间处理
			Stringtime(timeString) {
				const now = new Date(); // 获取当前时间
				const [hours, minutes] = timeString.split(":"); // 将时间字符串拆分为小时和分钟
				console.log(hours, minutes)
				const timestamp = Date.parse(new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes));
				// let mytime=Math.floor(timestamp / 1000);
				// console.log(new Date(mytime),'+++++++')
				return Math.floor(timestamp / 1000);
			},
			getConfigs() {
				let that = this;
				getconfigs({}).then((res) => {
					console.log(res, '+++++')
					if (res.code == 200) {
						let data = res.body.data;
						that.$store.commit('setShipment', data.shipment_charge)
						that.alertdata = data;
					}
				})
			},
			//订单生成微信支付
			Checkout() {
				if (this.actvaddress) {
					let that = this;
					if (this.selecetItem.length) {
						postorders({
							address_id: that.actvaddress.id,
							product: that.selecetItem,
							arrived_at: that.Stringtime(that.newData),
							remark:that.remark_value
						}).then((res) => {
							if (res.code == 200) {
								let id = res.body.data.id;
								uni.redirectTo({
									url: '/pages/order/paypage?id=' + id
								})
							}
						})
					}
				} else {
					//至少选一个地址
					this.$refs.uToast.show({
						top: 0,
						message: this.$t('AddressContent'),
						color: '#fff',
						bgColor: '#f0ba53'
					});
					return;
				}

			}

		}
	}
</script>

<style lang="scss" scopd>
	.confirm-content {
		width: 100%;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		padding-bottom: 200rpx;

		.selecet-type {
			.selecet-item {
				height: 200rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				width: 48%;
				border: 4rpx solid $uni-border-color;
				border-radius: $uni-border-radius-lg;
				box-sizing: border-box;
				padding: $uni-spacing-padding-sm;
				position: relative;
				overflow: hidden;

				.title {
					font-size: $uni-font-size-base;
				}

				.sub-title {
					color: $uni-text-color-grey;
					font-size: $uni-font-size-sm1;
					padding: 10rpx 0rpx;
				}

				.price {
					font-size: $uni-font-size-lg;
					font-weight: bold;
				}

				.selecet-top {
					&:before {
						content: '';
						position: absolute;
						right: 0;
						top: 0;
						border-top-right-radius: 10rpx;
						border: 40rpx solid $uni-color-topic;
						border-bottom-color: transparent;
						border-left-color: transparent;
					}

					&:after {
						content: '';
						width: 10rpx;
						height: 25rpx;
						position: absolute;
						right: 6rpx;
						top: 3rpx;
						border: 8rpx solid #fff;
						border-top-color: transparent;
						border-left-color: transparent;
						transform: rotate(35deg);
					}




				}
			}

			.active {
				border-color: $uni-color-topic;
			}
		}

		.selecet-address {
			.title {
				color: $uni-color-title;
				font-size: $uni-font-size-base;
			}

			.address-content {
				display: flex;
				flex-direction: column;

				.user {
					display: flex;
					padding-top: 20rpx;
					color: $uni-text-color-grey;

					.pone {
						padding: 0rpx 30rpx;
					}
				}
			}
		}

		.addres-liist {
			width: 100%;
			height: 70vh;
			position: relative;

			.top-title {
				width: 100%;
				height: 100rpx;
				font-size: $uni-font-size-lg;
				color: $uni-color-title;
				background-color: #eff1f6;
				border-radius: $uni-border-radius-lg 0rpx 0rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.scroll-conetnt {
				width: 100%;
				height: calc(100% - 100rpx);

				.item {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					padding: 30rpx 20rpx;
					border-top: 2rpx solid $uni-border-color;

					.left {
						display: flex;
						align-items: center;
						width: calc(100% - 100rpx);

						.seletor {
							width: 100rpx;
							height: 100rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 20rpx;
							box-sizing: border-box;
						}

						.addres-content {
							width: calc(100% - 100rpx);
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							color: $uni-color-title;
							padding: 0rpx $uni-spacing-padding-sm;
							box-sizing: border-box;

							.address {

								// display: flex;
								view {
									padding: 10rpx 0rpx;
								}
							}

							text {
								padding: 0rpx 10rpx;
							}

							.user {
								display: flex;
								color: $uni-text-color-grey;
								padding-top: 10rpx;
							}
						}

					}

					.right {
						width: 100rpx;

					}
				}
			}

			.footer-button {
				width: 92%;
				height: 100rpx;
				left: 4%;
				position: fixed;
				bottom: 2%;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				background-color: $uni-color-topic;
				color: #fff;
				font-size: $uni-font-size-base;
			}
		}

		.selecet-time {
			color: $uni-color-title;
			font-size: $uni-font-size-base;

			.time {
				display: flex;
				align-items: center;


				text {
					padding: 0rpx $uni-spacing-padding-sm;
				}


			}
		}

		.cart-list {
			display: flex;
			flex-direction: column;
			width: 100%;

			.card-item {
				width: 100%;

			}

			.item {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 15rpx;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 120rpx;
						height: 100rpx;
						border-radius: $uni-border-radius-sm;
					}

					.shop-content {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding: 0rpx 20rpx;

						.name {
							font-weight: bold;
							padding: 10rpx 0rpx;
						}

						.qut {
							font-size: $uni-font-size-base;
							color: $uni-text-color-grey;

							.x-text {
								font-size: $uni-font-size-sm0;
								padding-right: 3rpx;
							}
						}
					}

				}

				.right {
					display: flex;
					align-items: center;
					color: $uni-color-topic;
				}
			}

			.dcrtion-price {
				text-decoration: line-through;
			}

			.delivery-fees {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 0rpx;
				border-top: 2rpx solid $uni-border-color;
				border-bottom: 2rpx solid $uni-border-color;
				margin-top: 30rpx;

				.title {
					color: $uni-color-title;
					font-size: $uni-font-size-base;
				}

				.price {
					color: $uni-text-color-grey;
					direction: ltr !important;
				}
			}

			.all-Price {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: $uni-spacing-padding-sm 0rpx;

				.price {
					direction: ltr !important;
				}

				.title {
					color: $uni-color-title;
					font-size: $uni-font-size-base;
				}
			}
		}

		.remark {
			width: 100%;
			display: flex;
			flex-direction: column;
			background-color: $uni-bg-color-box;
			border-radius: $uni-border-radius-lg;
			padding: $uni-spacing-padding-sm;
			box-sizing: border-box;
			margin-top: 20rpx;
			box-shadow: $uni-bg-shadow;

			.title {
				color: $uni-color-title;
				font-size: $uni-font-size-base;
			}

		}

		.bottom-button {
			width: 92%;
			height: 100rpx;
			left: 4%;
			position: fixed;
			bottom: 4%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 50rpx;
			background-color: rgba(51, 51, 51, 1);

			.shre-left {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding-left: 20rpx;

				.icon-box {
					position: relative;

					.number {
						position: absolute;
						top: 0%;
						right: 0%;
						width: 40rpx;
						height: 40rpx;
						border-radius: 100%;
						background-color: $uni-color-topic;
						color: #fff;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: $uni-font-size-sm1;
						border: 4rpx solid #333333;
					}
				}

				.price-box {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.price {
						color: #fff;
						font-size: 36rpx;
						font-weight: 300;
					}

					.move-price {
						color: $uni-text-color-grey;
						font-size: $uni-font-size-paragraph;
					}
				}
			}

			.share-right {
				height: 100%;
				background-color: $uni-color-topic;
				border-radius: 0rpx 50rpx 50rpx 0rpx;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0rpx 60rpx;
				box-sizing: border-box;
				font-size: 38rpx;
				// font-weight: 550;
			}

		}

		.card-style {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: $uni-bg-color-box;
			border-radius: $uni-border-radius-lg;
			padding: $uni-spacing-padding-sm;
			box-sizing: border-box;
			margin-top: $uni-spacing-margin-sm;
			box-shadow: $uni-bg-shadow;
		}
	}

	.uni-textarea-compute,
	.uni-textarea-line,
	.uni-textarea-placeholder,
	.uni-textarea-textarea {
		font-size: 26rpx !important;
	}
</style>